<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>简单实用国产jQuery UI框架 - DWZ富客户端框架(J-UI.com)</title>

    <link href="themes/default/style.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="themes/css/core.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="themes/css/print.css" rel="stylesheet" type="text/css" media="print"/>

    <!--[if IE]>
    <link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
    <![endif]-->

    <!--[if lt IE 9]>
    <script src="js/speedup.js" type="text/javascript"></script>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script><![endif]-->
    <!--[if gte IE 9]><!-->
    <script src="js/jquery-2.1.4.js" type="text/javascript"></script><!--<![endif]-->


    <script src="js/dwz.core.js" type="text/javascript"></script>
    <script src="js/dwz.drag.js" type="text/javascript"></script>
    <script src="js/dwz.sortDrag.js" type="text/javascript"></script>
    <script src="js/dwz.miscDrag.js" type="text/javascript"></script>

    <!-- 可以用dwz.min.js替换前面全部dwz.*.js (注意：替换时下面dwz.regional.zh.js还需要引入)
    <script src="bin/dwz.min.js" type="text/javascript"></script>
    -->
    <script src="js/dwz.regional.zh.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            DWZ.init("dwz.frag.xml", {
                loginUrl: "login_dialog.html", loginTitle: "登录",	// 弹出登录对话框
//		loginUrl:"login.html",	// 跳到登录页面
                statusCode: {ok: 200, error: 300, timeout: 301}, //【可选】
                pageInfo: {
                    pageNum: "pageNum",
                    pageSize: "pageSize",
                    orderField: "orderField",
                    orderDirection: "orderDirection"
                }, //【可选】
                keys: {statusCode: "statusCode", message: "message"}, //【可选】
                ui: {hideMode: 'offsets'}, //【可选】hideMode:navTab组件切换的隐藏方式，支持的值有’display’，’offsets’负数偏移位置的值，默认值为’display’
                debug: false,	// 调试模式 【true|false】
                callback: function () {
                    $("dl.miscSortDrag").miscSortDrag();
                    $("div.sortDrag").sortDrag();
                }
            });

        });

    </script>

    <link href="themes/miscDrag/screen.css" rel="stylesheet" type="text/css" media="all"/>
    <style type="text/css">
        html, body {
            height: auto;
            overflow-y: auto;
            background: none
        }
    </style>
</head>

<body>

<div class="page unitBox">
    <!--<h2 class="contentTitle">炉门 Furnace door</h2>-->
    <!-- start自定义拖拽示例 -->
    <div class="pageContent" style="padding: 10px;">


        <dl id="myMiscSortDrag" class="miscSortDrag" drag-rel="dd .sortDrag" data-duplicate="1">
            <dt>
                <fieldset>
                    <legend>显示单元(Element)</legend>
                    <div class="itemBox">
                        <div class="dragItem" data-sn="element-11" data-name="室外 PM2.5">室外 PM2.5<label
                                class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                class="close">X</span></div>
                        <div class="dragItem" data-sn="element-12" data-name="样板间1 PM2.5">样板间1 PM2.5<label
                                class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                class="close">X</span></div>
                        <div class="dragItem" data-sn="element-13" data-name="样板间2 PM2.5">样板间2 PM2.5<label
                                class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                class="close">X</span></div>
                        <div class="dragItem" data-sn="element-21" data-name="过滤前水质">过滤前水质<label
                                class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                class="close">X</span></div>
                        <div class="dragItem" data-sn="element-22" data-name="过滤后水质">过滤后水质<label
                                class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                class="close">X</span></div>
                        <div class="dragItem" data-sn="element-32" data-name="样板间1噪音">样板间1噪音<label
                                class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                class="close">X</span></div>
                        <div class="dragItem" data-sn="element-33" data-name="样板间2噪音">样板间2噪音<label
                                class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                class="close">X</span></div>

                        <div class="dragItem" data-sn="element-41" data-name="样板间1温度">样板间1温度<label
                                class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                class="close">X</span></div>
                        <div class="dragItem" data-sn="element-42" data-name="样板间1湿度">样板间1湿度<label
                                class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                class="close">X</span></div>
                        <div class="dragItem" data-sn="element-51" data-name="样板间1照度">样板间1照度<label
                                class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                class="close">X</span></div>
                        <div class="dragItem" data-sn="element-61" data-name="样板间1风速">样板间1风速<label
                                class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                class="close">X</span></div>
                    </div>
                </fieldset>

            </dt>
            <dd>
                <fieldset>
                    <legend>屏幕布局配置(Screen)</legend>
                    <div class="row" style="padding: 0 10px;">
                        <div class="col-lg-4 col-md-12 col-sm-12">
                            <p class="title">空气质量(Panel)</p>
                            <div class="sortDrag" data-sn="panel-1" data-name="空气质量" data-over-sort="false">
                                <div class="dragItem" data-sn="element-11" data-name="室外 PM2.5">室外 PM2.5<label
                                        class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                        class="close">X</span></div>
                                <div class="dragItem" data-sn="element-12" data-name="样板间1 PM2.5">样板间1 PM2.5<label
                                        class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                        class="close">X</span></div>
                                <div class="dragItem" data-sn="element-13" data-name="样板间2 PM2.5">样板间2 PM2.5<label
                                        class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                        class="close">X</span></div>
                            </div>

                            <p class="title">热舒适度(Panel)</p>
                            <div class="sortDrag" data-sn="panel-6" data-name="热舒适度">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <p class="title">水质(Panel)</p>
                            <div class="sortDrag" data-sn="panel-2" data-name="水质" data-over-sort="false">
                                <div class="dragItem" data-sn="element-21" data-name="过滤前水质">过滤前水质<label
                                        class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                        class="close">X</span></div>
                                <div class="dragItem" data-sn="element-22" data-name="过滤后水质">过滤后水质<label
                                        class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span
                                        class="close">X</span></div>
                            </div>

                            <p class="title">风速(Panel)</p>
                            <div class="sortDrag" data-sn="panel-4" data-name="风速" data-over-sort="false">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <p class="title">噪音(Panel)</p>
                            <div class="sortDrag" data-sn="panel-3" data-name="噪音">
                            </div>

                            <p class="title">照度(Panel)</p>
                            <div class="sortDrag" data-sn="panel-5" data-name="照度" data-over-sort="false">
                            </div>
                        </div>

                    </div>
                </fieldset>
            </dd>

        </dl>


        <button type="button" onclick="alert( JSON.stringify($('#myMiscSortDrag').miscSortDragData()) )">获取数据</button>


    </div>
    <!-- end自定义拖拽示例 -->

</div>

</body>
</html>